﻿<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<link href="../../scripts/lib/layui/css/layui.css" rel="stylesheet" />
	<script src="../../scripts/lib/layui/layui.js"></script>
</head>
<body>
	<div id="view"></div>
	<!--//第一步：编写模版。你可以使用一个script标签存放模板，如：-->
	<script id="demo" type="text/html">
		<h3>{{ d.title }}</h3>
		<ul>
			{{#  layui.each(d.list, function(index, item){ }}
			<li>
				<span>{{ item.modname }}</span>
				<span>{{ item.alias }}：</span>
				<span>{{ item.site || '' }}</span>
			</li>
			{{#  }); }}
			{{#  if(d.list.length === 0){ }}
			无数据
			{{#  } }}
		</ul>
	</script>

	<script>
		layui.use(['laytpl'], function (laytpl) {
			//第三步：渲染模版
			var data = { //数据
				"title": "Layui常用模块",
				"list": [
					{ "modname": "弹层", "alias": "layer", "site": "layer.layui.com" },
					{ "modname": "表单", "alias": "form" }]
			}
			var getTpl = demo.innerHTML,
				view = document.getElementById('view');
			laytpl(getTpl).render(data, function (html) {
				view.innerHTML = html;
			});
		})
	</script>
</body>
</html>